<!-- 商品列表页 可切换布局 -->
<template>
	<view class="goodsContent">
		<!-- 列表状态 -->
		<view class="hisGoodsList" v-if="type == 2 && goodsData.length > 0">
			<view
				@click="toGoods(item.goods_id, item.store_id)"
				class="hisGoods flex-box"
				v-for="(item, index) in goodsData"
				:key="index">
				<view class="p-re">
					<image
						class="hisImg radius"
						:src="
							item.img ? $imgUrls(item.img) : staticUrl + '/images/imageLoading.png'
						"
						mode="aspectFill"></image>
					<view class="masks height p-ab flexac" v-if="item.stock == 0">
						<image :src="$imgUrls('Uploads/diy/img/sold.png')" class="sold"></image>
					</view>
				</view>
				<view class="flex goodsmsg flex-box flex-between">
					<view>
						<view class="thmeTxt hisGoodsName lines2">
							<text v-if="item.type == 1" class="speTag">特价</text>
							<text v-if="item.type == 2" class="speTag">团购</text>
							{{ item.name }}
						</view>
						<view class="saled selfEnd flex-box align-center" v-if="hot == 1">
							<text>已售{{ item.sales_number }}</text>
							<text>热度{{ item.show_number }}</text>
						</view>
					</view>
					<view class="profitTitle_ lines" v-if="item.profitTitle">
						<text>{{ item.profitTitle }}</text>
					</view>
					<view class="prices flex-box flex-between" style="margin-left: 0">
						<view>
							<view class="priceNow">
								<text class="price myPrice">{{
									item.type == 2 ? item.open_group_price : item.price
								}}</text>
								<template
									v-if="
										(item.type == 1 || item.type == 0) &&
										parseFloat(item.price) != parseFloat(item.full_price)
									">
									<text class="priceReg myPrice">{{ item.full_price }}</text>
								</template>
								<template
									v-if="
										item.type == 2 &&
										parseFloat(item.full_price) !=
											parseFloat(item.open_group_price)
									">
									<text class="priceReg myPrice">{{ item.full_price }}</text>
								</template>
							</view>
						</view>
						<!-- 	<text class="lines">
							{{ item.price_description }}
						</text> -->
						<view
							class="position flex-box align-center"
							v-if="
								startUp.enableLbs.state == 1 && positionshow == 1 && item.distance
							">
							<text class="iconfont icon-dingwei"></text>
							<text class="txt">{{
								parseFloat(item.distance) > 999
									? (parseFloat(item.distance) / 1000).toFixed(2) + 'km'
									: parseFloat(item.distance).toFixed(2) + 'm'
							}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 平铺状态 -->

		<template v-if="type == 1 && goodsData.length > 0">
			<view class="Wrapper">
				<view
					class="list"
					@click="toGoods(item.goods_id, item.store_id)"
					v-for="(item, index) in goodsData"
					:key="index">
					<image :src="$imgUrls(item.img)" mode="aspectFill" class="Imgs"></image>
					<view class="padding20 d-flex f-column">
						<text class="black size28 ellipsis">{{ item.name }}</text>
						<view class="saled m-top8" v-if="hot == 1">
							<text>已售{{ item.sales_number }}</text>
							<text>热度{{ item.show_number }}</text>
						</view>
						<view class="profitTitle_ lines" v-if="item.profitTitle">
							<text>{{ item.profitTitle }}</text>
						</view>
						<text class="priceReg myPrice color size30 m-top10">{{
							item.full_price
						}}</text>
					</view>
				</view>
			</view>
		</template>

		<!-- <view
			class="flex-box flex-between repeatGoodsList my-box"
			v-if="type == 1 && goodsData.length > 0">
			<waterfallsFlow
				ref="waterfallsFlow_"
				:list="goodsData"
				@image-click="toDetail"
				imageSrcKey="img"
				idKey="goods_id"
				:offset="12">
				<template v-slot:default="{ item }">
					<view class="goods-box-msg">
						<view class="thmeTxt lines2 hisGoodsName2">
							<text v-if="item.type == 1" class="speTag">特价</text>
							<text v-if="item.type == 2" class="speTag">团购</text>
							{{ item.name }}
						</view>
						<view class="saled" v-if="hot == 1">
							<text>已售{{ item.sales_number }}</text>
							<text>热度{{ item.show_number }}</text>
						</view>
						<view class="profitTitle_ lines" v-if="item.profitTitle">
							<text>{{ item.profitTitle }}</text>
						</view>
						<view class="prices flex-box flex-between">
							<view class="priceNow">
								<text class="price myPrice">{{
									item.type == 2 ? item.open_group_price : item.price
								}}</text>
								<template
									v-if="
										(item.type == 1 || item.type == 0) &&
										parseFloat(item.price) != parseFloat(item.full_price)
									">
									<text class="priceReg myPrice">{{ item.full_price }}</text>
								</template>
								<template
									v-if="
										item.type == 2 &&
										parseFloat(item.full_price) !=
											parseFloat(item.open_group_price)
									">
									<text class="priceReg myPrice">{{ item.full_price }}</text>
								</template>
							</view>
							<view
								class="position flex-box align-center"
								v-if="
									startUp.enableLbs.state == 1 &&
									positionshow == 1 &&
									item.distance
								">
								<text class="iconfont icon-dingwei"></text>
								<text class="txt">{{
									parseFloat(item.distance) > 999
										? (parseFloat(item.distance) / 1000).toFixed(2) + 'km'
										: parseFloat(item.distance).toFixed(2) + 'm'
								}}</text>
							</view>
						</view>
					</view>
					<view class="maskObtained" v-if="item.state == 0">
						<image
							:src="staticUrl + '/images/Obtained.png'"
							class="icon-obtained"></image>
					</view>
				</template>
			</waterfallsFlow>
		</view> -->
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import waterfallsFlow from './waterfall/waterfall.vue';
	export default {
		components: { waterfallsFlow },
		/**
		 * type: 1瀑布流  2列表
		 * hot:是否显示热度 0不显示 1显示
		 *
		 * **/
		props: ['goodsData', 'type', 'hot', 'positionshow'],
		data() {
			return {
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
			};
		},
		methods: {
			toDetail(goods) {
				this.toGoods(goods.goods_id, goods.store_id);
			},
		},
		computed: {
			...mapState(['startUp', 'color']),
		},
	};
</script>

<style scoped lang="scss">
	.Wrapper {
		width: 690rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 auto;
		.list {
			width: 330rpx;
			border-radius: 10rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;
			box-shadow: 0 0 6rpx 1px #ededed;
			.Imgs {
				width: 100%;
				height: 250rpx;
			}
			.saled {
				text {
					color: #888888;
					font-size: 24rpx;
					padding-right: 20rpx;
					border-right: 1px solid #dddddd;
					margin-right: 20rpx;
					line-height: 20rpx;
					&:nth-last-of-type(1) {
						border: none;
					}
				}
			}
		}
	}
	/* 商品列表 */
	.hisGoodsList {
		padding: 30rpx 24rpx;
		.hisImg {
			width: 200rpx;
			height: 200rpx;
			margin: 0 24rpx 0 0;
			border-radius: 8rpx;
		}
		.masks {
			width: 200rpx;
			background: rgba(0, 0, 0, 0.4);
			top: 0;
			left: 0;
			.sold {
				width: 120rpx;
				height: 120rpx;
			}
		}
		.speTag {
			margin-right: 4rpx;
		}
		.color333 {
			color: #333333;
			padding: 0;
			font-size: 26rpx;
			.bg {
				display: none;
			}
		}
		.prices {
			margin: 10rpx 8rpx 0 16rpx;
			.priceNow {
				margin-right: 10rpx;
				.price {
					font-size: 32rpx;
					color: $uni-color-price;
				}
			}
			.priceReg {
				color: #999;
				text-decoration: line-through;
				.price {
					color: #999;
					text-decoration: line-through;
				}
			}
			.position {
				text {
					font-size: 26rpx;
					color: #666666;
					margin-left: 6rpx;
				}
			}
		}
		.hisGoods {
			margin-bottom: 26rpx;
			border-bottom: 1px solid #e0e0e0;
			padding-bottom: 26rpx;
			position: relative;
			&:nth-last-of-type(1) {
				border-bottom: none;
			}
			.goodsmsg {
				flex-direction: column;
				.selfEnd {
					margin-top: 20rpx;
				}
				.hisGoodsName {
					margin-bottom: 10rpx;
					line-height: 36rpx;
					font-size: 28rpx;
				}
				.saled {
					text {
						color: #888888;
						font-size: 24rpx;
						padding-right: 20rpx;
						border-right: 1px solid #dddddd;
						margin-right: 20rpx;
						line-height: 20rpx;
						&:nth-last-of-type(1) {
							border: none;
						}
					}
				}
			}
		}
	}
</style>
